{layout name="../../admin/view/layout/main" /}
{:breadcrumb(['UI 示例:example/layout/index', '示例页面:example/pages/index', '选择示例2'])}
<style>
    .recharge-amount li {
        min-width: 110px;
        cursor: pointer;
        margin: 0px 5px 10px;
        padding: 5px 15px;
        color: #4d5259;
        text-align: center;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        border: 3px solid transparent;
        -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, .175);
        box-shadow: 0 0 2px rgba(0, 0, 0, .175);
    }
    .recharge-amount li.active {
        border-color: var(--bs-purple);
    }
    .recharge-amount li input {
        display: none;
    }
    </style>

<div class="row">

    <div class="col-lg-12">
      <div class="card">
        <div class="card-body">
        
          <p>常见的选择充值金额功能。</p>
        <ul class="list-inline recharge-amount">
          <li class="list-inline-item">
            <input type="radio" name="amount" value="6" />
            <i class="mdi mdi-currency-btc fa-2x"></i>
            <p>60个金币</p>
            <p>6元</p>
          </li>
          <li class="list-inline-item">
            <input type="radio" name="amount" value="12" />
            <i class="mdi mdi-currency-btc fa-2x"></i>
            <p>120个金币</p>
            <p>12元</p>
          </li>
          <li class="list-inline-item">
            <input type="radio" name="amount" value="30" />
            <i class="mdi mdi-currency-btc fa-2x"></i>
            <p>300个金币</p>
            <p>30元</p>
          </li>
          <li class="list-inline-item">
            <input type="radio" name="amount" value="68" />
            <i class="mdi mdi-currency-btc fa-2x"></i>
            <p>730个金币</p>
            <p><span class="text-purple">68元</span> <small><s class="text-lighter">73元</s></small></p>
          </li>
          <li class="list-inline-item">
            <input type="radio" name="amount" value="108" />
            <i class="mdi mdi-currency-btc fa-2x"></i>
            <p>1160个金币</p>
            <p><span class="text-purple">108元</span> <small><s class="text-lighter">116元</s></small></p>
          </li>
          <li class="list-inline-item">
            <input type="radio" name="amount" value="158" />
            <i class="mdi mdi-currency-btc fa-2x"></i>
            <p>1700个金币</p>
            <p><span class="text-purple">158元</span> <small><s class="text-lighter">170元</s></small></p>
          </li>
        </ul>
        
        <button class="btn btn-default" id="getChose">获取选中值</button>
        <pre class="mt-3" id="console"></pre>
        
        </div>
      </div>
  </div>

</div>
<script type="text/javascript">
    $(document).ready(function(){
        $(document).on('click', '.recharge-amount li', function() {
            $(this).addClass('active').siblings().removeClass('active');
            $(this).siblings().find('input').prop('checked', 0);
            $(this).find('input').prop('checked', 1);
        });
        
        $('#getChose').on('click', function() {
            var amount = $('input[name="amount"]:checked').val();
            if ((typeof(amount) =='undefined')) {
                amount = '您未选择充值金额';
            }
            $('#console').html(amount+'\n');
        });
    });
    </script>